<!DOCTYPE html>

<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{department.info}"></title>
    <style type="text/css">
        .from1{
            width: 300px;
            height: 30px;
        }

    </style>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-72 - 44; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }
        function query() {

            $("#flexigrid-id").flexOptions().flexReload();
        }

        $(function(){
            $("body").css("height",$(document).height()+"px");
            loadLeftTree();

            $("#delete-btn-id").click(function (event) {
                event.stopPropagation();
                var depUuid = $("#depUuid").val();
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{deleteDepartInfoByIds}]]*/'',
                    data: [
                        {name:"depUuid",value:depUuid}
                    ],
                    success: function (data) {
                        message(data.msg);
                        loadLeftTree();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                })
            })
            $("#update-btn-id").click(function(event){
                event.stopPropagation();
                var depUuid=  $("#depUuid").val();
                var organUuid=  $("#organUuid").val();
                var branchName=  $("#branchName").val();
                var belongCenter=  $("#belongCenter").val();
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{updateDepartById}]]*/'',
                    data: [
                        {name:"depUuid",value:depUuid},
                        {name:"organUuid",value:organUuid},
                        {name:"branchName",value:branchName},
                        {name:"belongCenter",value:belongCenter}
                    ],
                    success: function (data) {
                        message(/*[[#{common.modify.success}]]*/'');
                        //queryI18n(menuId);
                        // console.info(data)
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            });


            $("#bound-depart-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{common.bound}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var depUuid = $("#depUuid").text();
                            var belongCenter = "";
                            var ztreeObj = $.fn.zTree.getZTreeObj("bound-depart-tree-id");
                            var checkNodes = ztreeObj.getCheckedNodes(true);
                            var menuArray = [];
                            $(checkNodes).each(function (index,item) {
                                belongCenter = item.id;
                            });

                            if(belongCenter === ''){
                                message(/*[[#{common.select}]]*/"");
                                return;
                            }
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{saveBelongCenterIdByDepUuid}]]*/'',
                                data: [{name:"depUuid",value:depUuid},
                                    {name:"belongCenter",value:belongCenter}],
                                success: function (data) {
                                    // console.info(data)
                                    loadLeftTree();
                                    $("#bound-depart-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#bound-btn-id").click(function (evnet) {
                evnet.stopPropagation();
                // $("#bound-menu-dialog-id").dialog('open');
                boundTree();
            })
            $("#unbound-btn-id").click(function (event) {
                event.stopPropagation();
                var depUuid = $("#depUuid").val();
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{unboundParentIdByDepUuid}]]*/'',
                    data: [
                        {name:"depUuid",value:depUuid}
                    ],
                    success: function (data) {
                        message(data.msg);
                        loadLeftTree();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                })
            })

            $("#add-depart-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{common.add}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {

                            var flag = $("#add-depart-form-id input.form-control").verification({});
                            if(!flag){
                                return;
                            }
                            $("#add-depart-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#add-btn-id").click(function (event) {
                event.stopPropagation()
                $("#add-depart-form-id").resetForm();
                $("#add-depart-dialog-id").dialog('open')
            })

            $("#add-depart-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#add-depart-dialog-id").dialog('close');
                    query()
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });



            $("ul#tab-ul-depart-id>li").click(function (event) {
                event.stopPropagation()
                $(this).parent().find("a").removeClass("active");
                $(this).find("a").addClass("active");
                $("#tab-content-id > article").removeClass("in");
                $("#tab-content-id > article").removeClass("active");
                var tabId = $(this).attr("tab");
                $("#" + tabId).addClass("in");
                $("#" + tabId).addClass("active");


            });
            $("#allocate-auth-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.menu.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var roleUuid =  $("#allocate-auth-tree-id").attr("roleUuid");
                            var menuIds= [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allocate-auth-tree-id");
                            var checkNodes = ztreeObj.getCheckedNodes(true);
                            var menuArray = [];
                            $(checkNodes).each(function (index,item) {
                                menuIds.push(item.id);
                            });

                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{saveRoleRefMenu}]]*/'',
                                data: [
                                    {name:"roleUuid",value:roleUuid},
                                    {name:"menuIds",value:menuIds}
                                ],
                                success: function (data) {
                                    message(data.msg);
                                    $("#allocate-auth-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("ul#tab-ul-menu-id>li:nth-child(2)").click();
            var _columnWidth = (_gridWidth - 150) / 8;
            $("flexigrid-id").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{queryDepartInfoListByPage}]]*/"",
                dataType: 'json',
                colModel: [
                    {display: 'depUuid', name: 'depUuid', width: 150, sortable: false, align: 'center', hide: 'true'},
                    {
                        display: /*[[#{depart.id}]]*/"",
                        name: 'depUuid',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{organ.id}]]*/"",
                        name: 'organUuid',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{branch.name}]]*/"",
                        name: 'branchName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{belong.center}]]*/"",
                        name: 'belongCenter',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{modifier.id}]]*/"",
                        name: 'modifierId',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{mod.time}]]*/"",
                        name: 'modTime',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{del.flag}]]*/"",
                        name: 'delFlag',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{remark}]]*/"",
                        name: 'remark',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                ],
                resizable: false, //resizable table是否可伸缩
                useRp: true,
                useRp: true,
                usepager: false, //是否分页
                autoload: false, //自动加载，即第一次发起ajax请求
                hideOnSubmit: true, //是否在回调时显示遮盖
                showcheckbox: false, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata: true
            });
            function query(depUuid) {
                $("#flexigrid-depart-id").flexOptions({
                    extParam:[
                        {name:"depUuid",value:depUuid}
                    ]
                }).flexReload();
            }


        });//ready



        var leftSetting = {
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                onClick:onClickNode
            }
        };

        function loadLeftTree() {
            resizePageSize();
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryLeftTree}]]*/'',
                data: [],
                success: function (data) {
                    // console.info(data)
                    $.fn.zTree.init($("#left-tree-id"), leftSetting, data);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });

        }

        function onClickNode(event, treeId, treeNode) {
            console.info( treeNode)


        }
        function onClickNode(event, treeId, treeNode) {
            var depUuid=treeNode.id;
            console.info(treeNode)
            $("#depUuid").text(depUuid);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryOrganListById}]]*/'',
                data: [{name:"depUuid",value:depUuid}],
                success: function (data) {
                    // console.info(data)
                    // $.fn.zTree.init($("#Left-tree-id"), leftSetting, data);
                    console.info(data)
                    $("#depUuid").val(data.depUuid);
                    $("#organUuid").val(data.organUuid);
                    $("#branchName").val(data.branchName);
                    $("#belongCenter").val(data.belongCenter);

                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
            query(depUuid);
        }

        var BoundDepartSetting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        function boundTree() {
            var depUuid = $("#depUuid").text();
            if(depUuid === ''){
                message(/*[[#{common.select}]]*/'')
                return;
            }

            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryDepartTree}]]*/'',
                data: [
                    {name:"depUuid",value:depUuid}
                ],
                success: function (data) {
                    $.fn.zTree.init($("#bound-depart-tree-id"), BoundDepartSetting, data);

                    var ztreeObj = $.fn.zTree.getZTreeObj("bound-depart-tree-id");
                    var nodes = ztreeObj.getNodesByParam("id",depUuid,null);
                    ztreeObj.removeNode(nodes[0]);


                    $("#bound-depart-dialog-id").dialog('open');

                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12-197;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-72 - 44; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }

        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-150) /8;
            $("#flexigrid-id").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{queryDepartInfoListByPage}]]*/"",
                dataType: 'json',
                colModel: [
                    {display: 'depUuid', name: 'depUuid', width: 150, sortable: false, align: 'center', hide: 'true'},
                    {
                        display: /*[[#{depart.id}]]*/"",
                        name: 'depUuid',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{organ.id}]]*/"",
                        name: 'organUuid',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{branch.name}]]*/"",
                        name: 'branchName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{belong.center}]]*/"",
                        name: 'belongCenter',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{modifier.id}]]*/"",
                        name: 'modifierId',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{mod.time}]]*/"",
                        name: 'modTime',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{del.flag}]]*/"",
                        name: 'delFlag',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{remark}]]*/"",
                        name: 'remark',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                ],
                resizable: false, //resizable table是否可伸缩
                useRp: true,
                usepager: false, //是否分页
                autoload: false, //自动加载，即第一次发起ajax请求
                hideOnSubmit: true, //是否在回调时显示遮盖
                showcheckbox: false, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata: true
            });
            query();
        });
        function query() {

            $("#flexigrid-id").flexOptions().flexReload();
        }

        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-150) /13;
            $("#userinfo-table-id").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{queryUserInfoListByPage}]]*/"",
                dataType: 'json',
                colModel: [
                    {display: 'userUuid', name: 'userUuid', width: 150, sortable: false, align: 'center', hide: 'true'},
                    {
                        display: /*[[#{user.uuid}]]*/"",
                        name: 'userUuid',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.name}]]*/"",
                        name: 'userName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{registerdate}]]*/"",
                        name: 'registerDate',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.email}]]*/"",
                        name: 'email',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.mobile}]]*/"",
                        name: 'mobile',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.password}]]*/"",
                        name: 'password',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.depId}]]*/"",
                        name: 'depId',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{user.niceName}]]*/"",
                        name: 'niceName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{isSum}]]*/"",
                        name: 'isSum',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{modifier.id}]]*/"",
                        name: 'modifierId',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{mod.time}]]*/"",
                        name: 'modTime',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{del.flag}]]*/"",
                        name: 'delFlag',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{remark}]]*/"",
                        name: 'remark',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                ],
                resizable: false, //resizable table是否可伸缩
                useRp: true,
                usepager: false, //是否分页
                autoload: false, //自动加载，即第一次发起ajax请求
                hideOnSubmit: true, //是否在回调时显示遮盖
                showcheckbox: false, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata: true
            });
            query();
        });
        function query() {

            $("#userinfo-table-id").flexOptions().flexReload();
        }

        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-150) /8;
            $("#dutylist-table-id").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{queryDutyListByPage}]]*/"",
                dataType: 'json',
                colModel: [
                    {display: 'organUuid', name: 'organUuid', width: 150, sortable: false, align: 'center', hide: 'true'},
                    {
                        display: /*[[#{depart.oid}]]*/"",
                        name: 'organUuid',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{branch.name}]]*/"",
                        name: 'organName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{duty.name}]]*/"",
                        name: 'dutyName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{duty.id}]]*/"",
                        name: 'dutyId',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                ],
                resizable: false, //resizable table是否可伸缩
                useRp: true,
                usepager: false, //是否分页
                autoload: false, //自动加载，即第一次发起ajax请求
                hideOnSubmit: true, //是否在回调时显示遮盖
                showcheckbox: false, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata: true
            });
            query();
        });
        function query() {

            $("#dutylist-table-id").flexOptions().flexReload();
        }

    </script>
</head>
<body style="height:100% ;display: flex ;flex-direction: row";>
<div style="flex-basis: 260px; background-color:#99bbe8;overflow: scroll">


    <ul  id="left-tree-id" class="ztree">

    </ul>
</div>
<div style="flex-grow: 1;display: flex;flex-direction: column;">
    <nav style="flex-basis: 30px;margin-top: 10px;background-color:#E6E6FA">
        <a id="bound-btn-id" href="#" class="navbar-btn btn">
            <i class="glyphicon glyphicon-paperclip"></i>
            <span th:text="#{common.bound}"></span>
        </a>
        <a id="unbound-btn-id" href="#" class="navbar-btn">
            <i class="glyphicon glyphicon-link"></i>
            <span th:text="#{common.unbound}"></span>
        </a>
        <a id="delete-btn-id" href="#" class="navbar-btn">
            <i class="glyphicon glyphicon-trash"></i>
            <span th:text="#{common.delete}"></span>
        </a>
        <a id="add-btn-id" href="#" class="navbar-btn">
            <i class="glyphicon glyphicon-plus-sign"></i>
            <span th:text="#{common.add}"></span>
        </a>
        <a id="update-btn-id" href="#" class="navbar-btn">
            <i class="glyphicon glyphicon-floppy-disk"></i>
            <span th:text="#{common.modify}"></span>
        </a>

    </nav>

    <article style="flex-basis: 162px;;background-color: #E6E6FA">

        <form th:action="@{show.department.info}" method="post" class="from1">

            <div class="form-group">
                <span th:text="#{depart.id}"></span>
                <span id="depUuid" class="form-control"></span>
            </div>
            <div class="form-group">
                <span th:text="#{depart.oid}"></span>
                <input id="organUuid" class="form-control" type="text">
            </div>
            <div class="form-group">
                <span th:text="#{depart.name}"></span>
                <input id="branchName" class="form-control" type="text">
            </div>
            <div class="form-group">
                <span th:text="#{depart.organ.id}"></span>
                <input id="belongCenter" class="form-control" type="text">
            </div>


            <article style="flex-grow: 1;">
                <ul id="tab-ul-depart-id" class="nav nav-tabs">
                    <li tab="tab-department-info-id">
                        <a href="#">
                            <i class="fa fa-university"></i>
                            <span th:text="#{department.info}"></span>
                        </a>
                    </li>
                    <li tab="tab-user-info-id">
                        <a href="#">
                            <i class="fa fa-th"></i>
                            <span th:text="#{user.list}"></span>
                        </a>
                    </li>
                    <li tab="tab-duty-list-id">
                        <a href="#">
                            <i class="fa fa-th"></i>
                            <span th:text="#{duty.list}"></span>
                        </a>
                    </li>
                </ul>

                <section id="tab-content-id" class="tab-content">
                    <article id="tab-department-info-id" class="tab-pane fade in active">
                        <!--  <span th:text="#{department.info}"></span>-->
                        <table id="flexigrid-id"></table>
                    </article>
                    <article id="tab-user-info-id" class="tab-pane fade">
                        <!-- <span th:text="#{user.info}"></span>-->
                        <table id="userinfo-table-id"></table>
                    </article>
                    <article id="tab-duty-list-id" class="tab-pane fade">
                        <!-- <span th:text="#{user.info}"></span>-->
                        <table id="dutylist-table-id"></table>
                    </article>
                </section>
            </article>
        </form>
    </article>

</div>
<div id="bound-depart-dialog-id" style="display: none">
    <ul id="bound-depart-tree-id" class="ztree">
    </ul>
</div>
<div id="add-depart-dialog-id" style="display: none">
    <form id="add-depart-form-id"  th:action="@{addDepartInfo}" method="post">

        <div class="form-group">
            <span th:text="#{depart.id}"></span>
            <input class="form-control" id="add-organ-id" type="text" name="depUuid" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{depart.oid}"></span>
            <input class="form-control" id="add-depart-id" type="text" name="organUuid" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{depart.name}"></span>
            <input class="form-control" id="add-depart-name-id" type="text" name="branchName" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{depart.organ.id}"></span>
            <input class="form-control" id="add-organ-name-id" type="text" name="belongCenter" reg="^.{1,20}$">
        </div>

    </form>
</div>


</body>
</html>